<!--圆形统计-->
<import type='css' file="css.jquery-circliful" />
<import type="js" file="js.jquery-c-min" />
<import  type="js" file="js.jquery-circliful-min" />
<import type="js" file="js.jquery-circliful" />
<!--kendo-->
<import type='css' file="css.kendo.examples-offline" />
<import type='css' file="css.kendo.kendo-common-min" />
<import type='css' file="css.kendo.kendo-default-min" />
<import type='css' file="css.kendo.kendo-dataviz-min" />
<import type='css' file="css.kendo.kendo-dataviz-default-min" />
<!--<import type="js" file="js.kendo.jquery-min" />-->
<import  type="js" file="js.kendo.kendo-dataviz-min" />
<import type="js" file="js.kendo.console" />
<!--圆形统计-->
<script type="text/javascript">
    $( document ).ready(function(){
        $('#email').circliful();
        $('#power').circliful();
        $('#msg').circliful();
        $('#yuyue').circliful();
    });
</script>
<script>
    var stats = new Array();
    var charge = "charge";
    $.ajax({
        type:"post",
        url:'__URL__/chart',
        data:'type='+charge,
        dataType:"json",
        async:false,
        success:function(data){
            $.each(data, function (n, va) {
                stats[n]  ={ value: va.total, date: new Date(va.currentTime) };
            });
            return stats;
        }});
    //预约次数
    var stats_right = new Array();
    var bespeak = "bespeak";
    $.ajax({
        type:"post",
        url:'__URL__/chart',
        data:'type='+bespeak,
        dataType:"json",
        async:false,
        success:function(data){
            $.each(data, function (n, va) {
                stats_right[n]  ={ value: va.total, date: new Date(va.currentTime) };
            });
            return stats_right;
        }});
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "成功充电/次/日"
            },
            dataSource: {
                data: stats
            },
            series: [{
                type: "line",
                aggregate: "avg",
                field: "value",
                categoryField: "date"
            }],
            categoryAxis: {
                field: "date",
                labels: {
                    rotation: -90,
                    format: "MM/dd"
                }
            }
        });
    }
    //        右边
    function createChart_right() {
        $("#chart_right").kendoChart({
            title: {
                text: "成功预约/次/日"
            },
            dataSource: {
                data: stats_right
            },
            series: [{
                type: "line",
                aggregate: "avg",
                field: "value",
                categoryField: "date"
            }],
            //使用 年月日
            categoryAxis: {
                field: "date",
                labels: {
                    rotation: -90,
                    format: "MM/dd"
                }
            }
        });
    }
    $(document).ready(createChart);
    $(document).ready(createChart_right);
</script>
<style scoped>
    .chart-wrapper, .chart-wrapper .k-chart {
        width: 100%;
    }
</style>
<!--kendo-->
<ol class="breadcrumb">
    <li> <i class="fa fa-anchor"></i>
        &nbsp;{:C('SERVICE')}
    </li>
    <li>首页</li>
</ol>
<div class="charge"></div>
<!--  location end -->
<div class="indexTitle mt10">电桩实时状态总览 </div>
<ul class="indexIconsBg">
    <a href={:U('State/index',array('charge'=>1))}>
        <li>
            <div class="iconBox in_icon2"></div>
            <div class="icon_con">
                <div class="enTitle">CHARGE</div>
                <div class="cnTitle c_charge">{$charge}</div>
            </div>
            <div class="numberBox icon_2_2"></div>
        </li>
    </a>
    <div class="iconFg"></div>
    <a href={:U('State/index',array('charge'=>0))}>
        <li>
            <div class="iconBox in_icon3"></div>
            <div class="icon_con">
                <div class="enTitle">RELEASE</div>
                <div class="cnTitle c_online">{$release}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_3"></div>

        </li>
    </a>
    <div class="iconFg"></div>
    <a href={:U('State/index',array('error'=>1))}>
        <li>
            <div class="iconBox in_icon1"></div>
            <div class="icon_con">
                <div class="enTitle">OFFLINE</div>
                <div class="cnTitle c_offline">{$error}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_1"></div>

        </li>
    </a>
    <div class="iconFg"></div>
    <a href={:U('State/index')}>
        <li>
            <div class="iconBox in_icon4"></div>
            <div class="icon_con">
                <div class="enTitle">ALL</div>
                <div class="cnTitle c_error">{$charAll}</div>
            </div>
            <!--<div class="numb">2234421</div>-->
            <div class="numberBox icon_2_4"></div>

        </li>
    </a>
</ul>
<div class="indexTitle mt20">电站运营总览</div>
<ul class="indexIconsBg">
    <!-- 运营总数 -->
    <a href={:U("Site/index")}>
        <li>
            <div class="iconBox icon_3_1"></div>
            <div class="icon_con">
                <div class="enTitle">ONLINE</div>
                <div class="cnTitle c_online">{$plant_online}</div>
            </div>
            <div class="numberBox icon_2_3"></div>
        </li>
    </a>
    <div class="iconFg"></div>
    <!-- 在建总数 -->
    <a href={:U("Site/index",array("current_state"=>2))}>
        <li>
            <div class="iconBox icon_3_2"></div>
            <div class="icon_con">
                <div class="enTitle">BUILDING</div>
                <div class="cnTitle c_charge">{$plant_building}</div>
            </div>
            <div class="numberBox icon_2_2"></div>
        </li>
    </a>
    <div class="iconFg"></div>
    <!-- 规划总数 -->
    <a href={:U("Site/index",array("current_state"=>3))}>
        <li>
            <div class="iconBox icon_3_3"></div>
            <div class="icon_con">
                <div class="enTitle">COMING</div>
                <div class="cnTitle c_error">{$plant_coming}</div>
            </div>
            <div class="numberBox icon_2_4"></div>
        </li>
    </a>
</ul>
<div id="CB"></div>
<!--  ev char state & station  end-->
<div class="w50per">
    <!--<div class="indexTitle mt30">123</div>-->
    <!--坐标系效果 左边-->
    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="chart" style="margin-left: 20px; width:95%;"></div>
        </div>
    </div>
</div>
<div class="w50per">
    <!--<div class="indexTitle mt30">654</div>-->
    <!--坐标系效果 右边-->
    <div id="example_right" class="k-content">
        <div class="chart-wrapper" >
            <div id="chart_right"  style="width: 95%"></div>
        </div>
    </div>
</div>
<div style="margin-top:450px;"></div>
<!--<div align="center">-->
<!--<img src="__PUBLIC__/img/2.png" width="95%" alt="tongji" style="margin-bottom:30px;" /></div>-->
